<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>模板管理</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .organizeName,
        .operation span:first-of-type {
            color: #1990FF;
        }

        .operation span:last-of-type {
            color: #f5222d;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }

        .twoRow {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-table tr td:nth-of-type(3) {
            min-width: 5em;
        }

        td
        {
            white-space: nowrap;
            text-align: center;
        }

        label{
            width: auto;
        }
    </style>
</head>
<body>
<script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>
<script src="./js/xm-select.js"></script>

<form class="layui-form" action="" lay-filter="data">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: auto !important;">搜索：</label>
            <input type="text" name="mouldName" class="layui-input" style="width: 14em;" placeholder="模板名" value="">
        </div>
        <div class="layui-inline">
            <input type="text" id="deptName" name="deptName" class="layui-input" style="width: 8em;" placeholder="所属部门" value="" onclick="isAdminOfProcess()">
        </div>

        <!--        <div class="layui-inline" style="width: 10em !important;">-->
        <!--          <select name="projectStatus">-->
        <!--            <option value=""></option>-->
        <!--          </select>-->
        <!--        </div>-->
        <div class="layui-inline">
            <input type="text" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="10">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">查询模板</button>
        </div>
    </div>
</form>

<table class="layui-table">
    <thead>
    <tr>
        <!--          <th><input type="checkbox" id="select" onclick="selectAll()" /></th>-->
        <th style="text-align: center">模板编号</th>
        <th style="text-align: center">模板名</th>
        <th style="text-align: center">适用产品</th>
        <th style="text-align: center">适用CORE</th>
        <th style="text-align: center">模板控制码</th>
        <th style="text-align: center">所属部门</th>
        <th style="text-align: center">创建时间</th>
        <th style="text-align: center">状态</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div style="display: flex;">
    <!--      <button type="button" class="layui-btn layui-btn-xs" style="background: #F5222D;" onclick="deleteProject()">批量删除</button>-->
    <div style="flex: 1">
        <div class="pageNav">
          <span class="layui-breadcrumb" lay-separator="-">
            <a class="fristPage">首页</a>
            <a class="lastPage">上一页</a>
            <a><cite>第<span id="page"></span>页</cite></a>
            <a class="nextPage">下一页</a>
            <a class="endPage">尾页</a>
          </span>
        </div>
    </div>
</div>

<div id="processInfo"  class="site-text" style="margin: 5%; display: none"></div>


<script type="text/javascript">
    var displayStart = 1;
    var endPage = null;
    var layer = layui.layer;
    var upload = null;
    var laydate = null;
    var form = null;
    var list = null;

    layui.use(['form', 'element', 'laydate'], function() {
        form = layui.form;
        laydate = layui.laydate;

        search(1);

        form.on('submit(searchBtn)', function() {
            search(1);
            return false;
        });
        $('.fristPage').click(function() {
            search(1);
            return false;
        });
        $('.lastPage').click(function() {
            search((displayStart > 1 ? displayStart - 1 : 1));
            return false;
        });
        $('.nextPage').click(function() {
            search((displayStart < endPage ? displayStart + 1 : endPage));
            return false;
        });
        $('.endPage').click(function() {
            search(endPage);
            return false;
        })
    })

    function isAdminOfProcess() {
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code===200){
                }
                else if (res.code===400){
                    $('#deptName').attr('disabled','disabled');
                    layer.msg("非管理员只能查看本部门模板");
                }
            }
        })
    }



    function listProcessInfo(index) {
        $("#processInfo").empty();
        $.ajax({
            url: '/pin-library/listProcessInfo/'+index,
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    var trs='';
                    //设定弹出内容
                    trs+='<div align="center" style="width: 510px;">'
                    trs+='<div style="margin: 5px;width: 510px" align="center"><h3><b> 工序明细</b> </h3>'+
                        '<div style="margin: 5px;width:auto;float: left"><span>产品名:<b>'+res.data.pinName+'</b> </span></div></div>'
                    trs+='<div align="center"><table border="2" width="510px" height="120px">' +
                        '    <tr>' +
                        '        <th><b>工序流程名/PROCESS</b></th>' +
                        '        <th><b>工艺制程条件/PROCESS CONDITION</b></th>' +
                        '    </tr>'
                    for (var i = 0; i < res.data.process.length; i++) {
                        trs+='    <tr>' +
                            '        <th>'+res.data.process[i]+'</th>' +
                            '        <th>'+res.data.conditionInfo[i]+'</th>' +
                            '    </tr>';
                    }
                    trs+='</table></div></div>';
                    $("#processInfo").append(trs);
                    //打开弹出
                    layer.open({
                        type: 1,
                        title: '产品工序明细',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area : ['600px' , '550px'],
                        content: $('#processInfo'),
                        end:function () {
                            $('#processInfo').css('display','none')
                        }
                    });


                }
            }
        })
    }

    function viewMould(index) {
        $.ajax({
            url: '/process-condition/getMouldPath/' + index,
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    let resultNew= encodeURIComponent(res.data)
                    layer.open({
                        type: 2
                        , title: '预览模板' //不显示标题栏
                        , closeBtn: 1  // 右上角关闭按钮
                        , area: ['60%', '78%']  // 弹框大小
                        , shade: 0.8
                        , btn: ['确定']
                        , btnAlign: 'r'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: "https://view.officeapps.live.com/op/view.aspx?src=" + resultNew
                        , maxmin: true
                    });
                }
            }
        })
    }


    function banMould(index,status) {
        var msg;
        if(status=="1"||status=="0"){
            msg="  模板一旦停用将不可选用！";
        }else if(status=="2") {
            msg="  确定启用该模板?";
        }
        $.ajax({
            url: '/sys-user/getAdminLevel/' + sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    let confirm1=layer.confirm('<svg t="1655274481284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" width="25" height="25"><path d="M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z" fill="#FAAD14" p-id="2822"></path></svg>' +
                        msg, {
                            btn: ['确认','取消']
                        },function () {
                            $.ajax({
                                url: '/process-condition/banMould/' + index,
                                method: 'GET',
                                contentType: 'application/json',
                                success: function (res) {
                                    if (res.code === 200) {
                                        layer.alert(res.msg, {
                                            icon: 1,
                                            skin: 'layer-ext-demo',
                                            end: function(){
                                                location.reload();
                                            }
                                        })
                                    }else
                                        layer.alert(res.msg, {
                                            icon: 0,
                                            skin: 'layer-ext-demo',
                                            end: function(){
                                                location.reload();
                                            }
                                        })
                                }
                            })
                            layer.close(confirm1);
                        }
                        ,function (){
                            layer.close(confirm1);
                        }
                    )
                } else if (res.code === 400) {
                    layer.msg("权限不足!")
                }
            }
        })
    }


    function search(index) {
        if (!index) var index = displayStart;
        var data = form.val('data');
        data.displayStart = index;
        data.userId=sessionStorage.getItem('userId');
        $.ajax({
            url: url + '/process-condition/listCondition',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(res) {
                $('tbody').empty();
                displayStart = res.data.current;
                endPage = res.data.pages;
                list = res.data.records;
                for (var i = 0; i < res.data.records.length; i++) {
                    $('tbody').append(
                        "<tr>" +
                        "<td class='organizeName'>" + res.data.records[i].mouldNum + "</td>" +
                        "<td class='organizeName'>" + res.data.records[i].mouldName + "</td>" +
                        "<td>" + res.data.records[i].pinName+ "</td>" +
                        "<td>" + res.data.records[i].coreName + "</td>" +
                        "<td>" + res.data.records[i].mouldKey + "</td>" +
                        "<td>" + res.data.records[i].deptName + "</td>" +
                        "<td>" + res.data.records[i].createTime.replace('T',' ') + "</td>" +
                        "<td onclick='uploadMould("+res.data.records[i].mouldStatus+","+res.data.records[i].id+",\"" + res.data.records[i].mouldName + "\")'>"
                        + mouldStatus(res.data.records[i].mouldStatus) + "</td>" +
                        "<td class='operation'>" +
                        "<button class='layui-btn layui-btn-danger layui-btn-sm' onclick='banMould(" + res.data.records[i].id + ","+res.data.records[i].mouldStatus+")'>一键停启</button>" +
                        "<button class='layui-btn layui-btn-normal layui-btn-sm' onclick='viewMould(" + res.data.records[i].id + ")'>预览</button>" +
                        "</td>"+
                        "</tr>"
                    );
                }
                $('#page').html(displayStart)
            }
        })
    }

    function uploadMould(index,id,name) {
        $.ajax({
            url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
            method: 'GET',
            contentType: 'application/json',
            success: function (res) {
                if (res.code === 200) {
                    if(index!="0"){
                        layer.msg("该模板已绑定文件，无需重复操作!")
                    }else {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim',
                            area: ['300px', '320px'],
                            title: '上传模板文件',
                            content: `
            <form class="layui-form" action="" lay-filter="change">
                <div class="layui-input-inline" style="margin: 10px">
                    <span id="mouldName" style="width: 20em"></span>
                </div>
                <div class="layui-form-item" style="margin: 10px">
                    <div class="layui-input-inline">
                        <div class="layui-upload-drag" id="uploadFile" lay-verify="isupload">
                            <i class="layui-icon"></i>
                            <p>点击上传文件，或将文件拖拽到此处！</br>●仅支持xls/xlsx文件！</p>
                        </div>
                        <span id="filename" style="width: 20em"></span>
                    </div>
                    <div class="layui-input-inline">
                        <div id="uploadResult" class="layui-upload-list">
                        </div>
                    </div>
                </div>
            </form>
          `,
                            success: function() {
                                $("#mouldName").text("模板名:"+name);
                                layui.use(['form',"layer",'upload'], function() {
                                    upload=layui.upload;
                                    //文件上传
                                    var uploadInst =upload.render({
                                        elem: '#uploadFile', //绑定元素（上传文件的id）
                                        url: '/process-condition/upload', //上传接口
                                        method: 'POST',
                                        auto: true,
                                        exts: 'xls|xlsx',// 设置允许上传的格式
                                        //bindAction: '#submit', //指向一个按钮触发上传
                                        size: 102400,//限制文件大小10M
                                        multiple: false,
                                        data:{},
                                        choose:function(obj){
                                            obj.preview(function(index, file, result){
                                                if(file.name.length>0) {
                                                    choose_file_flag=true;
                                                    $("#filename").text(file.name);
                                                }
                                            });
                                        },
                                        before: function(obj) {
                                            obj.preview(function(index, file, result){
                                                layer.load();
                                                if(file.name.length>0) {
                                                    choose_file_flag=true;
                                                }
                                            });
                                            this.data={'id':id};
                                        },
                                        done: function(res, file, upload) {//上传完毕回调
                                            if(choose_file_flag){
                                                layer.closeAll('loading');
                                                if(res.code==200){
                                                    layer.alert(res.msg,{
                                                        icon: 1,
                                                        skin: 'layer-ext-demo',
                                                        end:function () {
                                                            location.reload();
                                                        }
                                                    })
                                                }else{
                                                    layer.alert(res.msg,{
                                                        icon: 2,
                                                        skin: 'layer-ext-demo',
                                                        end:function () {
                                                            location.reload();
                                                        }
                                                    })
                                                }
                                            }
                                        }
                                        , error: function() {//请求异常回调
                                            layer.closeAll('loading');
                                            layer.alert('上传发生异常，请稍后重试！');
                                        }
                                    });
                                })
                            }
                        });
                    }
                }else {
                    layer.msg("权限不足")
                }
            }
        })
    }

</script>
</body>
</html>
